<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演练实施</title>
    <link rel="stylesheet" href="../css/element.css">
</head>
<body>
<script src="/js/socket/socket.js"></script>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/recorder/recorder.js"></script>
<style>
    .el-container, #app {
        height: 100%;
    }

    .el-header, .el-footer {
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
        text-align: center;
        height: 100%;
        padding-left:5px;
    }

    .el-main {
        text-align: center;
        height: 100%;
        padding:0!important;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    /*覆盖下划线.el-divider--horizontal样式*/
    .el-divider--horizontal {
        margin: 8px 0;
    }

    /*title样式*/
    .title_box {
        overflow: hidden;
        display: block;
    }

    .title_name {
        float: left;
        display: block;
    }

    .remain_time {
        float: right;
        width:160px;
    }

    .remain_time .time {
        color: red;
    }

    .title_name span {
        display: inline-block;
        width: 3px;
        height: 20px;
        background-color: #44bfca;
        vertical-align: sub;
    }

    .title_name h3 {
        display: inline-block;
        font-weight: bolder;
    }
    .leftTop_container .el-card__body {
        padding: 0;
    }
.el-aside .el-card__body {
    height:calc(100% - 30px);
}
    video {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
    }

    /*成员信息样式*/
    .member {
        text-align: left;
        margin-top: 5px;
    }

    .member li {
        margin: 8px 0;
        margin-left: 5px;
    }

    .member img {
        width: 32px;
        height: 32px;
    }

    /*发言对话样式*/
    .say {
        height: calc(100% - 36px);
        overflow: auto;
    }
    .say li {
        margin: 15px 0;
    }

    .say p {
        padding: 10px;
        background-color: #F1F1F1;
        border-radius: 8px;
        margin-top: 5px;
        text-align: left;
    }
    .mp3Says {
        padding: 5px;
        background-color: #F1F1F1;
        border-radius: 8px;
        margin-top: 5px;
        text-align: left;
        height:32px;
    }

    .say .say_title {
        text-align: left;
    }

    /*发言文本域输入框样式*/
    textarea {
        height: 120px;
        border: 1px solid #ccc;
    }

    .topBox {
        height: 240px;
        overflow: auto;
    }

    .bottomBox {
        height:calc(100% - 260px);
    }
    /*语音发言麦克风图标样式*/
    .luyin {
        color: transparent;
        background: #f0f0f0 url(src/style/res/luyin.png) no-repeat left;
        background-size: 15px 15px;
        cursor: default;
        pointer-events: none;
    }
    .loading {
        color: transparent;
        background: #f0f0f0 url(src/style/res/luyin.gif) no-repeat left;
        background-size: 15px 15px;
        cursor: default;
        pointer-events: none;
    }
    #sayContent .el-card__body {
        height:calc(100% - 30px);
    }
    /*语音发言内容图标样式*/
    .sayIcon {
        background: url("src/style/res/yuyin.png") no-repeat;
        background-size: 21px 21px;
        width:21px;
        height:21px;
        position:relative;
        top:5px;
        left:3px;
        display: block;
    }
    .sayIcon:hover{
        background: url("src/style/res/yuyin2.png") no-repeat;
        background-size: 23px 23px;
        width:23px;
        height:23px;
        top:4px;
        left:3px;
        position:relative;
        display: block;
        cursor:pointer;
    }
</style>
<div id="app">
    <el-container>
        <el-main>
<!--            一个视频-->
            <template v-if="videoNumber == 1">
                <el-container style="height:60%;box-sizing: border-box;border:none;" class="leftTop_container">
                    <el-main style="padding:0;border:none;box-sizing: border-box;">
                        <el-card style="height:100%;box-sizing: border-box;position:relative;box-sizing: border-box;">
                            <video v-if="main.type == 'vedio'" :src="main.url" controls autoplay="autoplay" width="100%" height="100%" name="media">
                            </video>
                            <img v-else :src="main.url" style="width:100%">
                        </el-card>
                    </el-main>
                </el-container>
            </template>
<!--            两个视频-->
            <template v-if="videoNumber == 2">
                <div style="height:60%;box-sizing: border-box;border:none;position:relative;">
                    <el-card style="height:100%;position:absolute;left:0;top:0;box-sizing: border-box;width:50%;">
                        <video v-if="leftup.type == 'vedio'" :src="leftup.url" controls autoplay="autoplay" width="100%" height="100%" name="media">

                        </video>
                        <img v-else :src="leftup.url" style="width:100%">
                    </el-card>
                    <el-card style="height:100%;position:absolute;top:0;left:50%;box-sizing: border-box;width:50%;">
                        <video v-if="leftdown.type == 'vedio'" :src="leftdown.url" autoplay="autoplay" controls width="100%" height="100%" name="media">
                        </video>
                        <img v-else :src="leftdown.url" style="width:100%">
                    </el-card>
                </div>
            </template>
<!--            三个视频-->
            <template v-if="videoNumber == 3">
                <el-container style="height:60%;box-sizing: border-box;border:none;" class="leftTop_container">
                    <el-aside width="400px" style="background:none;border:none;box-sizing: border-box;padding-left:0;">
                        <el-card style="height:49%;position:relative;box-sizing: border-box;">
                            <video v-if="leftup.type == 'vedio'" :src="leftup.url" controls autoplay="autoplay" width="400px" height="100%" name="media">

                            </video>
                            <img v-else :src="leftup.url" style="width:100%">
                        </el-card>
                        <el-card style="height:49%;position:relative;top:2%;box-sizing: border-box;">
                            <video v-if="leftdown.type == 'vedio'" :src="leftdown.url" autoplay="autoplay" controls width="400px" height="100%" name="media">

                            </video>
                            <img v-else :src="leftdown.url" style="width:100%">
                        </el-card>
                    </el-aside>
                    <el-main style="padding:0;margin-left:1%;border:none;box-sizing: border-box;">
                        <el-card style="height:100%;box-sizing: border-box;position:relative;box-sizing: border-box;">
                            <video v-if="main.type == 'vedio'" :src="main.url" controls autoplay="autoplay" width="100%" height="100%" name="media">
                            </video>
                            <img v-else :src="main.url" style="width:100%">
                        </el-card>
                    </el-main>
                </el-container>
            </template>


            <el-card style="height:calc(40% - 132px);box-sizing: border-box;margin-top:5px;">
                <div class="title_box" style="text-align: left;">
                    <div class="title_name">
                        <span></span>
                        <h3>场景说明</h3>
                    </div>
                        <el-button style="margin-left:20px;padding:10px 25px;" size="small" @click="oneVideo">1</el-button>
                        <el-button style="padding:10px 25px;" size="small" @click="twoVideo">2</el-button>
                        <el-button style="padding:10px 25px;" size="small" @click="threeVideo">3</el-button>
                    <div class="remain_time">
                        <el-button size="small" @click="saySomething">发言</el-button>
                        剩余时间：<span class="time">{{time}}</span>
                    </div>
                </div>
                <el-divider style="margin:10px 0;"></el-divider>
                <h1 v-if="errorMessage">{{errorMessage}}</h1>
                <template v-else>
                	<h3>{{sceneName}}</h3>
	                <p style="text-align: left;text-indent: 2em;">
	                    {{sceneDesc}}
	                </p>
                </template>
            </el-card>
            <el-card id="sayContent" style="height:120px;margin-top:5px;">
                <div class="title_box">
                    <div class="title_name">
                        <span></span>
                        <h3>当前发言内容</h3>
                    </div>
                </div>
                <el-divider style="margin:10px 0;"></el-divider>
                <audio v-if="soundurl" :src="soundurl" autoplay="autoplay" controls="controls" >不支持</audio>
                <p v-if="currentContent" style="text-align: left;text-indent:2em;font-size:15px;">{{currentContent}}</p>
            </el-card>
        </el-main>
        <el-aside width="300px" style="height: 100%;">
            <el-card style="height: 100%;box-sizing: border-box;">

                <div class="topBox">
                    <div class="title_box">
                        <div class="title_name">
                            <span></span>
                            <h3>成员（{{member.length}}）</h3>
                        </div>
                    </div>
                    <el-divider style="margin:5px 0;"></el-divider>
                    <ul class="member">
                        <li v-for="(item,index) in member" :key="index">
                            <img :src="item.avatar">
                            <el-tag :type="item.type" size="mini">{{item.dept}}
                            </el-tag>
                            <span>{{item.username}}</span>
                            
                        </li>
                    </ul>
                </div>

                <div class="bottomBox">
                    <div class="title_box" style="margin-top:20px;">
                        <div class="title_name">
                            <span></span>
                            <h3>发言</h3>
                        </div>
                    </div>
                    <el-divider style="margin:5px 0;"></el-divider>
                    <!--发言内容-->
                    <ul class="say">
                        <li v-for="(item,index) in say" :key="index">
                            <div class="say_title">
                                <el-tag :type="item.type" size="mini">{{item.sender_role}}
                            	</el-tag>
                            	<span>{{item.sender_name}}</span>
                            </div>
                            <p v-if="item.ordertype==0" @click="textplay(item.content)" style="cursor: pointer;">{{item.content}}</p>
                            <div v-if="item.ordertype == 1" class="mp3Says">
                                <i class="sayIcon" @click="audioplay(item.content)"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-card>
        </el-aside>
    </el-container>
</div>
<script>
	var tagType = ['','success','info','danger','warning'];
	var t = null;
    new Vue({
        el: '#app',
        data() {
            return {
                videoNumber:1,
                member: [
                    {avatar: "/avatar/1.jpg", type: "", username: "张三",dept:'演练指挥部'},
                    {avatar: "/avatar/2.jpg", type: "success", username: "李四",dept:'医疗组'},
                    {avatar: "../avatar/3.jpg", type: "info", username: "王五",dept:'后勤组'},
                    {avatar: "../avatar/4.jpg", type: "danger", username: "赵六",dept:'抢修组'},
                    {avatar: "../avatar/5.jpg", type: "warning", username: "孙七",dept:'通讯组'},
                ],
                say: [],
                textarea: "",
                sceneName:'',
                sceneDesc:'场景描述',
                time:'',
                errorMessage:'',
                main:{type:'vedio',url:''},
                leftup:{type:'vedio',url:''},
                leftdown:{type:'vedio',url:''},
                recorder:null,
                currentContent:'',
                soundurl:''
            }
        },
        mounted() {
			this.initSocket();
			this.initScene();
			var that = this;
			HZRecorder.get(function (rec) {  
	             that.recorder = rec;	                         
	        });
        },
        computed: {},
        methods: {
            //视频数量切换
            oneVideo(){
                this.videoNumber = 1;
            },
            twoVideo(){
                this.videoNumber = 2;
            },
            threeVideo(){
                this.videoNumber = 3;
            },
        	initSocket:function(){
        		axios.get('/user/find_user').then(res=>{
        			if(res.data.success){
        				var userid = res.data.data;
        				const that = this;
                        const socket = new SocketServer(userid);
                        that.user = socket.user;
                        socket.onMessage(function (msg) {
                        	console.log(msg);
                            var ws_data = JSON.parse(msg)
                            if (ws_data.type == 'change_scene') {
                                //调用点的数据刷新方法
                                that.initScene();
                            } else if (ws_data.type == 'finish') {
                                //获取报警数据
                                setTimeout(layer.alert('演练结束'),8000);
                            }else if(ws_data.type == 'change_order'){
                            	that.changeOrder(ws_data.data);
                            	that.changeTime(ws_data.time);
                            }else if(ws_data.type == 'speaker'){
                            	// layer.alert('请发言');
                                that.saySomething();
                            }
                        })
        			}
        		}).catch(err=>{
                    console.log(err);
                })
        	},
        	initScene:function(){
        		axios.get('/find_data').then(res=>{
        			var data = res.data;
        			if(data.success){        				
        				this.sceneName = data.scene;
        				this.sceneDesc = data.detail;
        				this.errorMessage = '';
        				if(data.main){
        					this.main = data.main;
        				}
        				if(data.leftup){
        					this.leftup = data.leftup;
        				}
        				if(data.leftdown){
        					this.leftdown = data.leftdown;
        				}
        				this.time = this.changeTime(data.time);
        				this.member = this.getUser(data.users);
        			}else{
        				var msg = data.message;
        				this.errorMessage = msg;
        			}
        		}).catch(err=>{});
        	},
        	getUser:function(users){
        		console.log(users);
        		var u = [];
        		if(users && users.length > 0){
        			var depts = [];        			
        			for(var i=0; i<users.length; i++){
        				var index = indexOfDept(depts, users[i].dept);
        				if(index == -1){
        					index = depts.length;
        					depts.push(users[i].dept);
        				}
        				var obj = {
        				  type:tagType[index%5],
        				  avatar:'/avatar/' + (i+1) + '.jpg',
        				  username:users[i].username,
        				  dept:users[i].dept +'-'+users[i].rolename,
        				  userid:users[i].userid,
        				  roleid:users[i].roleid
        				};
        				u.push(obj);
        			}        			
        		}
        		return u;
        	},
        	changeOrder:function(data){        		
        		this.say = data;
        		console.log(this.say);
        		if(this.say.length > 0 ){
        			var order = this.say[this.say.length-1];
        			if(order.ordertype == 1){
        				this.currentContent = '';
        				this.soundurl = order.content;        				
        			}else{        				
        				this.soundurl = '';
        				if(order.ordertype == 0){
        					this.currentContent = order.content;
        				}
        			}
        		}
        	},
        	changeTime:function(time){
        		this.time = time/1000;
        	},
        	start:function(){        		
        		this.recorder.start();
        	},
        	stop:function(callback){
        		this.recorder.upload('/send_sound',callback);
        		var that = this;
        		HZRecorder.get(function (rec) {  
   	               that.recorder = rec;	                         
   	        	});
        	},
            //发言弹窗
            saySomething(){
        	    const that = this;
                layer.prompt({
                    formType: 2,
                    value: '',
                    title: '请填写您要发言的内容或语音发言',
                    area: ['500px', '100px'], //自定义文本域宽高
                    btn: ['开始录音', '发送录音', '发送文本'],
                    yes: function(index, layero){
                        //添加录音loading效果
                        let btn = layero[0].getElementsByClassName('layui-layer-btn')[0].getElementsByClassName('layui-layer-btn0')[0];
                        //添加动态样式
                        btn.classList.add("loading");
                        //开始录音
                        that.start();
                    }
                    ,btn2: function(index, layero){
                        //发送录音
                        that.stop((data)=>{
                            console.log(data);
                                if(data.success){
                                    layer.msg("发送成功！", {icon: 1});
                                }else{
                                    layer.msg(data.message, {icon: 2});
                                }
                                //移除录音loading效果
                                let btn = layero[0].getElementsByClassName('layui-layer-btn')[0].getElementsByClassName('layui-layer-btn0')[0];
                                //移除动态样式
                                btn.classList.remove("loading");
                                return false;
                        });
                    }
                    ,btn3: function(index, layero){
                        var value = layui.jquery('#layui-layer'+index + " .layui-layer-input").val();
                        let form = new FormData();
                        form.append('content',value);
                        axios.post('/send_data',form).then(res=>{
                            if(res.data.success){
                                layer.msg("发送成功！", {icon: 1});
                            }else{
                                layer.msg(res.data.message, {icon: 2});
                            }
                            return false;
                        }).catch(err=>{
                            console.log(err);
                        })
                    },

                });
            },
            //点击语音图标播放音频
            audioplay(url){
                this.soundurl = url;
                this.currentContent = "";
            },
            //点击文字赋值当前发言内容
            textplay(textContent){
                this.currentContent = textContent;
                this.soundurl = "";
            }
        }
    });
    
    function indexOfDept(a, k){
    	for(var i=0; i<a.length; i++){
    		if( a[i] == k ){
    			return i;
    		}
    	}
    	return -1;
    }
</script>
</body>
</html>